import React, { useState, useEffect } from 'react'
import { useNavigate } from "react-router-dom"
import "../Hcy_scss/Hcy_page7.scss"
import { Toast, NavBar } from 'react-vant';
import { useDispatch } from 'react-redux'
import { changeDefaultState } from "../../../redux/slice/DefaultSlice"

export default function Hcy_page7() {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    return (
        <div id='Hcy_page7'>
            <div className='top'>
                <NavBar
                    title="选择取消原因"
                    onClickLeft={() => { Toast('返回') }}
                />
            </div>
            <div className="main animate__animated animate__bounceInRight">
                <h2>平台相关</h2>
                <div className='box'>
                    <p>平台派单太远
                        <input type="radio" name='reason' value='平台派单太远' />
                    </p>
                    <p>上车位置错误/找不到上车位置
                        <input type="radio" name='reason' value='上车位置错误/找不到上车位置' />
                    </p>
                </div>
                <h2>司机相关</h2>
                <div className='box'>
                    <p>联系不上司机
                        <input type="radio" name='reason' value='联系不上司机' />
                    </p>
                    <p>司机以各种理由不来接我
                        <input type="radio" name='reason' value='司机以各种理由不来接我' />
                    </p>
                    <p>司机要求取消订单
                        <input type="radio" name='reason' value='司机要求取消订单' />
                    </p>
                    <p>司机以各种理由不来接我
                        <input type="radio" name='reason' value='司机以各种理由不来接我' />
                    </p>
                    <p>司机原地不动或反方向形式
                        <input type="radio" name='reason' value='司机原地不动或反方向形式' />
                    </p>
                    <p>司机要求加价或现金交易
                        <input type="radio" name='reason' value='司机要求加价或现金交易' />
                    </p>
                    <p>司机迟到
                        <input type="radio" name='reason' value='司机迟到' />
                    </p>
                    <p>不上订单显示车辆或司机
                        <input type="radio" name='reason' value='不上订单显示车辆或司机' />
                    </p>
                </div>
                <h2>自己原因</h2>
                <div className='box'>
                    <p>行程有变
                        <input type="radio" name='reason' value='行程有变' />
                    </p>
                    <p>目的地错误
                        <input type="radio" name='reason' value='目的地错误' />
                    </p>
                    <p>选择其他出行工具
                        <input type="radio" name='reason' value='选择其他出行工具' />
                    </p>
                </div>
                <button className='btmbtn' onClick={()=>{navigate('/app'),dispatch(changeDefaultState(0))}}>确认提交</button>
            </div>
        </div>
    )
}
